<script setup>
// import HelloWorld from './components/HelloWorld.vue'

import 'element-plus/es/components/message-box/style/css'
import { ElMessageBox } from 'element-plus'

function btnClick() {
  const _time = new Date().getTime()
  ElMessageBox.alert(`hello world ${_time}`)
}

import { useCounterStore } from './store/counter'
const counterStore = useCounterStore()
import { storeToRefs } from 'pinia'
const { counter } = storeToRefs(counterStore)

const datas_link = [
  ["hello", "/hello"],
  ["首页", "/"],
]
</script>

<template>
  <div class="px-3 py-2 flex items-start space-x-3">
    <span>hello world</span> <el-button type="primary" @click="btnClick">MessageBox</el-button>
    <span>counter : {{ counter }}</span>
    <router-link 
      class="px-2 text-blue-700 cursor-pointer hover:underline hover:bg-blue-800 hover:text-white"
      v-for="(item, index) in datas_link" :key="index" :to="item[1]">{{ item[0] }}</router-link>
  </div>
  <router-view></router-view>
</template>

<style scoped>
</style>
